<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>

<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7 charset=utf-8" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>{$siteTitle} </title>
<script type="text/javascript" src="__PUBLIC__/admin/wx/js/jquery.js" charset="utf-8"></script>
<script type="text/javascript" src="__PUBLIC__/includes/javascript/ecmall.js" charset="utf-8"></script>
<script type="text/javascript" src="__PUBLIC__/includes/javascript/member.js" charset="utf-8"></script>
<script charset="utf-8" type="text/javascript" src="__PUBLIC__/includes/javascript/dialog/dialog.js" id="dialog_js" charset="utf-8"></script>
<script charset="utf-8" type="text/javascript" src="__PUBLIC__/includes/javascript/jquery.ui/jquery.ui.js" charset="utf-8"></script>
<script charset="utf-8" type="text/javascript" src="__PUBLIC__/includes/javascript/jquery.ui/i18n/zh-CN.js" ></script>
<script charset="utf-8" type="text/javascript" src="__PUBLIC__/includes/javascript/jquery.validate.js" charset="utf-8"></script>
<script charset="utf-8" type="text/javascript" src="__PUBLIC__/includes/javascript/mlselection.js" charset="utf-8"></script>
<script charset="utf-8" type="text/javascript" src="__PUBLIC__/includes/javascript/inline_edit.js" charset="utf-8"></script>
<style type="text/css">
<!--
body {background: #fcfdff}
			.place{height:40px; background:url(__PUBLIC__/admin/images/righttop.gif) repeat-x;}
			.place span{line-height:40px; font-weight:bold;float:left; margin-left:12px;}
			.placeul li{float:left; line-height:40px; padding-left:7px; padding-right:12px; background:url(__PUBLIC__/admin/images/rlist.gif) no-repeat right;}
			.placeul li:last-child{background:none;}
-->
</style>
<link href="__PUBLIC__/admin/wx/css/style.css" rel="stylesheet" type="text/css" />
<link href="__PUBLIC__/admin/wx/css/user.css" rel="stylesheet" type="text/css" />
</head>
<body>
		<div class="place">
		    <span>位置：</span>
		    <ul class="placeul">
		    <li>首页</li>
		    <li>微信菜单管理（可创建最多3个一级菜单，每个一级菜单下可创建最多5个二级菜单。）</li>
		    </ul>
		</div>
<!--栏目列表-->
<div class="pad_lr_10" style="padding-top: 20px;">
    <div class="J_tablelist table_list" data-acturi="{:U('ajaxEditMenu')}">
    <table width="100%" cellspacing="0" id="J_cate_tree">
        <thead>
            <tr>
                <th width="3%"><input type="checkbox" name="checkall"  class="checkall"></th>
                <th width="6%"><span data-tdtype="order_by" data-field="id">ID</span></th>
                <th width="20%">菜单名称</th>
               	<th width="10%">菜单属性</th>
                <th>URL/KEY</th>
              	<th width="5%"><span data-tdtype="order_by" data-field="ordid">排序</span></th>
				<th width="5%"><span data-tdtype="order_by" data-field="status">状态</span></th>
                <th width="15%">管理操作</th>
            </tr>
        </thead>
    	<tbody>
    		<foreach name="all_menu" item="one_menu" key="ii">
    			
	        	<tr id='node-{$one_menu.id}' >
	        	
	                <td align='center'><input type='checkbox' value='{$one_menu.id}' class='checkitem'></td>
	                <td align='center'>{$one_menu.id}</td>
	                <td><span ectype="inline_edit" data-field='menuName' data-id='{$one_menu.id}' data-required="1" class='tdedit'  style='color:'>{$one_menu.menuName}</span></td>
	                <td align='center'></td>
	                <td ></td>
	                <td align='center'><span ectype="inline_edit" data-field='menuStort' data-id='{$one_menu.id}' data-required="1" data-type="number" class='tdedit'>{$one_menu.menuStort}</span></td>
	                <td align='center'><img data-tdtype="toggle" data-id="1" data-field="status" data-value="1" src="__PUBLIC__/admin/images/toggle_enabled.gif" /></td>
	                <td align='center'>
	                	<a href="javascript:;" class="J_showdialog" ectype="dialog" uri="{:U('addWxMenu',array('parent_id'=>$one_menu['id']))} " dialog_title="添加菜单" dialog_id="add_wx_menu" dialog_width="520">添加子菜单</a> |
	                    <a href="javascript:;" class="J_showdialog" ectype="dialog" uri="{:U('editWxMenu',array('id'=>$one_menu['id']))}" dialog_title="编辑 - {$one_menu.menuName}" dialog_id="edit" dialog_width="520">编辑</a> |
	                    <a href="javascript:drop_confirm('您确定要删除“{$one_menu.menuName}”，该菜单为一级菜单，将删除它将会将它下面的所有二级菜单一起删除!', '{:U('deleteWxMenu',array('id'=>$one_menu['id'],'type'=>'parent_menu'))}');" class="J_confirmurl" >删除</a>
	                </td>
	            </tr>
            	<volist name='one_menu.urlAndkey' id='one_children_menu'>
					<if condition="$i eq count($one_menu['urlAndkey'])">
	            		<tr id='node-{$one_children_menu.id}'  class="child-of-node-{$one_menu.id}">
		                <td align='center'><input type='checkbox' value='{$one_children_menu.id}' class='checkitem'></td>
		                <td align='center'>{$one_children_menu.id}</td>
		                <td>&nbsp;&nbsp;&nbsp;└─ <span ectype="inline_edit" data-field='menuName' data-id='{$one_children_menu.id}' data-required="1" class='tdedit'  style='color:'>{$one_children_menu.menuName}</span></td>
		                <td align='center'><span data-field='menuAction' data-id='{$one_children_menu.id}' data-required="1" ><span >{$one_children_menu.menuAction}</span></span></td>
		                <td><span ectype="inline_edit" data-field='urlAndkey' data-id='{$one_children_menu.id}' data-required="1" class='tdedit'  ><span style="width: 200px; float: left; ">{$one_children_menu.urlAndkey}</span></span></td>
		                <td align='center'><span ectype="inline_edit" data-field='menuStort' data-id='{$one_children_menu.id}' data-required="1" data-type="number" class='tdedit'>{$one_children_menu.menuStort}</span></td>
		                <td align='center'><img data-tdtype="toggle" data-id="38" data-field="status" data-value="1" src="__PUBLIC__/admin/images/toggle_enabled.gif" /></td>
		                <td align='center'>
		                	 <a href="javascript:;" class="J_showdialog" ectype="dialog" uri="{:U('editWxMenu',array('id'=>$one_children_menu['id']))}" dialog_title="编辑 - {$one_menu.menuName}" dialog_id="edit" dialog_width="520">编辑</a> |
	                    	<a href="javascript:drop_confirm('您确定要删除“{$one_children_menu.menuName}”!', '{:U('deleteWxMenu',array('id'=>$one_children_menu['id'],'type'=>'children_menu'))}');" class="J_confirmurl" >删除</a>
		                </tr>
					<else />
						<tr id='node-{$one_children_menu.id}'  class="child-of-node-{$one_menu.id}">
			             <td align='center'><input type='checkbox' value='{$one_children_menu.id}' class='checkitem'></td>
			             <td align='center'>{$one_children_menu.id}</td>
			             <td>&nbsp;&nbsp;&nbsp;├─ <span ectype="inline_edit" data-field='menuName' data-id='{$one_children_menu.id}' data-required="1" class='tdedit'  style='color:'>{$one_children_menu.menuName}</span></td>
			             <td align='center'><span data-field='menuAction' data-id='{$one_children_menu.id}' data-required="1"><span >{$one_children_menu.menuAction}</span></span></td>
			             <td><span ectype="inline_edit" data-field='urlAndkey' data-id='{$one_children_menu.id}' data-required="1" class='tdedit'  ><span style="width: 200px; float: left; ">{$one_children_menu.urlAndkey}</span></span></td>
			             <td align='center'><span ectype="inline_edit" data-field='menuStort' data-id='{$one_children_menu.id}' data-required="1" data-type="number" class='tdedit'>{$one_children_menu.menuStort}</span></td>
			             <td align='center'><img data-tdtype="toggle" data-id="4" data-field="status" data-value="1" src="__PUBLIC__/admin/images/toggle_enabled.gif" /></td>
			             <td align='center'>
			              	<a href="javascript:;" class="J_showdialog" ectype="dialog" uri="{:U('editWxMenu',array('id'=>$one_children_menu['id']))}" dialog_title="编辑 - {$one_menu.menuName}" dialog_id="edit" dialog_width="520">编辑</a> |
	                    	<a href="javascript:drop_confirm('您确定要删除“{$one_children_menu.menuName}”!', '{:U('deleteWxMenu',array('id'=>$one_children_menu['id'],'type'=>'children_menu'))}');" class="J_confirmurl" >删除</a>
			            </tr>
					</if>
   
				</volist>

            </foreach>
           </tbody>
    	<tr>
    	<td colspan="8">
	    	<a href="javascript:void(0);" ectype="dialog" dialog_id="add_wx_menu" uri="{:U('addWxMenu')}" dialog_title="添加菜单"  dialog_width="520"><input type="button" class="btn btn_add" value="添加菜单"/></a>
	    	<a  onclick="creat()" ><input type="button" class="btn btn_submit" value="生成菜单"/></a>
	    	<a  onclick="previewMenu()" target="_parent"><input type="button" class="btn btn_scan" value="预览菜单"/></a>
    		<a  onclick="deleteWxMenu()" ><input type="button" class="btn btn_delete" value="删除菜单"/></a>
    		
    	</td>
    	</tr>
    </table>
	    <script>
		    function creat(){
		    	if(confirm('是否创建自定义菜单')){
		    		location.href="{:U('createMenu')}";
		    	}
		    }
		    function deleteWxMenu(){
		    	if(confirm('您确定要删除微信自定义菜单')){
		    		location.href="{:U('deleteMenu')}";
		    	}
		    }
		    function previewMenu() {
		    	if(clieck_flag == 0) {
		    		$("#bg_box").show();
			    	$("#preview_menu").show();
		    	} else {
		    		$.ajax({
		                type:"GET",
		                url: "{:U('ajaxShowMenu')}",
		                dataType: 'json',           //注意这里面的格式形式！
		                success:function(data){
		                	var appendStr = "";
		                	$.each(data, function (i, item){
		                		appendStr += "<li class='pre_menu_item grid_item size1of3 jsViewLi' id='subView'>"+
						    					"<a href='javascript:void(0);' class='jsView' onclick = 'showParentMenu("+item.id+")'>"+item.menuName+"</a>"+
						    					"<div class='sub_pre_menu_box jsSubViewDiv' style='display: none;' data-id='"+item.id+"'>"+
						    						"<ul class='sub_pre_menu_list' >";
						    						$.each(item.urlAndkey, function (j, itemj){
						    							appendStr += "<li>"+
						    									"<a href='javascript:void(0);' class='jsSubView'>"+itemj.menuName+"</a>"+
						    								"</li>";
						    						});
						    							appendStr += "<i class='arrow arrow_out'></i>"+
						    							"<i class='arrow arrow_in'></i>"+
						    						"</ul>"+
						    					"</div>"+
						    				"</li>";
		                	});
		                	 $("#viewList").html(appendStr);
		                }
		            });
			    	$("#bg_box").show();
			    	$("#preview_menu").show();
		    	}
		    }
		    $(function () {
		    	$("#viewClose").bind("click", function () {
		    		$("#bg_box").hide();
			    	$("#preview_menu").hide();
		    	});
		    	
		    });
		    function showParentMenu(parent_id) {
		    	$('#subView div').each(function(){
		           var child_id = $(this).attr("data-id");
		           if(parent_id == child_id) {
		        	   $(this).show();
		           } else {
		        	   $(this).hide();
		           }
			    });
		    }
	    </script>
	    
    </div>
</div>
<div class="mask" id="bg_box"></div>
<div class="preview" id="preview_menu" style="z-index: 10000">
	<div class="mobile_preview_hd">
		<strong class="nickname">华胜</strong>
	</div>
	<div class="mobile_preview_bd">
		
	</div>
	<div class="mobile_preview_ft">
		<ul class="pre_menu_list grid_line" id="viewList">
			<foreach name="all_menu" item="one_menu">
				<li class="pre_menu_item grid_item size1of3 jsViewLi" id="subView">
					<a href="javascript:void(0);" class="jsView" onclick = "showParentMenu('{$one_menu.id}')">{$one_menu.menuName}</a>
					<div class="sub_pre_menu_box jsSubViewDiv" style="display: none;" data-id="{$one_menu.id}">
						<ul class="sub_pre_menu_list" >
							<foreach name="one_menu.urlAndkey" item="one_children_menu">
								<li>
									<a href="javascript:void(0);" class="jsSubView">{$one_children_menu.menuName}</a>
								</li>
							</foreach>
							<i class="arrow arrow_out"></i>
							<i class="arrow arrow_in"></i>
						</ul>
					</div>
				</li>
			</foreach>
		</ul>
	</div>
	<span id="close_img"><a href="javascript:void(0);" class="mobile_preview_closed" id="viewClose">关闭</a></span>
</div>
<style type="text/css">
	ul, ol {padding-left: 0;list-style-type: none;}
	li {display: list-item;text-align: -webkit-match-parent;}
	.preview{background-image: url('__PUBLIC__/admin/wx/images/bg_mobile1e5b3a.png?123');width: 322px; 
		height: 630px; position: absolute;top:10px; left:0px; display: none;margin-left:400px;}
	.mobile_preview_hd{height:168px;text-align:center;}
	.mobile_preview_hd .nickname {display: inline-block;padding-top: 140px;width: 140px;overflow: hidden;text-overflow: ellipsis;
		white-space: nowrap;word-wrap: normal;font-size: 12px;color: #fff;}
	.mobile_preview_bd {position: relative;height: 310px;margin-left: 40px;margin-right: 28px;overflow-y: scroll;}
	.mobile_preview_ft{height:152px;}
	.pre_menu_list{margin-left: 78px;margin-right: 36px;}
	.pre_menu_item {position: relative;float: left;line-height: 38px;background: transparent url(__PUBLIC__/admin/wx/images/bg_menu_split_v1e5b3a.png?123) no-repeat 100% 50%;}
	.size1of3 {width: 33.33%;}
	.pre_menu_item a {display: block;width: auto;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;
		word-wrap: normal;color: #fff;margin-right: 12px;text-align: center;text-decoration: none;text-shadow: 0 1px 1px #000;}
	a{outline:0;}
	.pre_menu_item a:hover {color: #a4a4a4;}
	.sub_pre_menu_box {
		position: absolute;bottom: 50px;left: 50%;margin-left: -50px;border: 1px solid #434343;box-shadow: 0 1px 3px #808080,inset 0 1px 0 #656565;
		-moz-box-shadow: 0 1px 3px #808080,inset 0 1px 0 #656565;-webkit-box-shadow: 0 1px 3px #808080,inset 0 1px 0 #656565;background-color: #4f4f4f;
	}
	.sub_pre_menu_list li {line-height: 30px;}
	.sub_pre_menu_list li a {width: 85px;margin: 1px;}
	.sub_pre_menu_list li a:HOVER {background-color:#2b2b2b;}
	.sub_pre_menu_box .arrow_out {bottom: -9px;display: inline-block;width: 0;
		height: 0;border-width: 8px;border-style: dashed;border-color: transparent;border-bottom-width: 0;border-top-color: #434343;border-top-style: solid;}
	.sub_pre_menu_box .arrow {position: absolute;left: 50%;margin-left: -8px;}
	.sub_pre_menu_box .arrow_in {bottom: -8px;display: inline-block;width: 0;
		height: 0;border-width: 8px;border-style: dashed;border-color: transparent;border-bottom-width: 0;border-top-color: #4f4f4f;border-top-style: solid;
	}
	.sub_pre_menu_box .arrow {position: absolute;left: 50%;margin-left: -8px;}
	.mobile_preview_closed {
		position: absolute;top: -10px;right: -16px;cursor: pointer;line-height: 200px;
		overflow: hidden;background: transparent url(__PUBLIC__/admin/wx/images/icon_closed1e5b3a.png?123) no-repeat 0 0;
		width: 65px;
		height: 65px;vertical-align: middle;display: inline-block;}
	#close_img a:HOVER{background: transparent url(__PUBLIC__/admin/wx/images/icon_closed1e5b3a.png?123) no-repeat -65px 0px;display: inline-block;}
	.mask {position: fixed;display:none;top: 0;left: 0;width: 100%;height: 100%;filter: alpha(opacity = 75);-moz-opacity: .75;-khtml-opacity: .75;opacity: .75;background-color: #000;z-index: 9998;}
</style>
<script charset="utf-8" type="text/javascript" src="__PUBLIC__/includes/javascript/jquery.treetable.js" ></script>
<script>
$(function(){
   // initialState:'expanded'
    $("#J_cate_tree").treeTable({indent:20,treeColumn:2});
});
</script> 
</body>
</html>